<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <!--浏览器移动端预览-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>关于我</title>
        <link rel="stylesheet" href="./static/css/semantic.min.css">
        <link rel="stylesheet" href="./static/css/me.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    </head>
    <body>
        <!--首部-->
        <nav class="ui inverted attached segment m-padded-tb-mini m-opacity-mini m-shadow-small">
            <div class="ui container">
                <div class="ui inverted secondary stackable menu">
                    <h2 class="ui teal header item">天乔巴夏</h2>
                    <!--menu-->
                    <a href="index.html" class=" m-item item m-mobile-hide"><i class="archive icon"></i>首页</a>
                    <a href="type.html" class="m-item item m-mobile-hide"><i class="idea icon "></i>分类</a>
                    <a href="tags.html" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
                    <a href="archives.html" class="m-item item m-mobile-hide"><i class="clone icon"></i>归档</a>
                    <a href="aboutme.html" class="active m-item item m-mobile-hide"><i class="user icon"></i>关于我</a>
                    <!--search box-->
                    <div class="right item">
                        <div class="ui icon input">
                            <input type="text" placeholder="搜索">
                            <i class="search link icon"></i>
                        </div>
                    </div>
                </div>
            </div>
            <a href="#" id="side" class="ui inverted icon button m-top-right m-mobile-show">
                <i class="sidebar icon"></i>
            </a>
        </nav>

        <!--中间部分-->
        <div class="m-container m-padded-tb-big">
            <div class="ui container">
                <div class="ui stackable grid">
                    <!--左边博客列表-->
                    <div class="eleven wide column">
                        <div class="ui segment">
                            <img src="./static/images/me.jpg" alt="" class="ui fluid bordered rounded image" >
                        </div>
                    </div>
                    <!--右边侧边栏-->
                    <div class="five wide column">
                        <div class="ui top attached segment">
                            <div class="ui header center aligned m-text-spaced">关于我</div>
                        </div>
                        <div class="ui attached segment">
                            <p class="m-text">天乔巴夏、Java小白,从零单排</p>
                            <p class="m-text">QQ: 1332790762</p>
                            <p class="m-text">微信: huayuhaoshuai</p>
                        </div>
                        <div class="ui center aligned attached segment">
                            <div class="ui header m-text-spaced">兴趣爱好</div>
                        </div>
                        <div class="ui attached segment">
                            <div class="ui orange basic label">编程</div>
                            <div class="ui orange basic label">写作</div>
                            <div class="ui orange basic label">阅读</div>
                            <div class="ui orange basic label">睡觉</div>
                        </div>
                        <div class="ui center aligned attached segment">
                            <div class="ui header m-text-spaced">编程技能</div>
                        </div>
                        <div class="ui attached segment">
                            <div class="ui blue basic label m-margin-tb-tiny">Java</div>
                            <div class="ui blue basic label m-margin-tb-tiny">JavaScript</div>
                            <div class="ui blue basic label m-margin-tb-tiny">Python</div>
                            <div class="ui blue basic label m-margin-tb-tiny">MySQL</div>
                            <div class="ui blue basic label m-margin-tb-tiny">C++</div>
                            <div class="ui blue basic label m-margin-tb-tiny">html</div>
                            <div class="ui blue basic label m-margin-tb-tiny">css</div>
                        </div>
                        <div class="ui center aligned attached segment">
                            <div class="ui header m-text-spaced">与我交朋友</div>
                        </div>
                        <div class="ui center aligned attached segment">
                            <a href="https://github.com/TQBX" target="_blank" class="ui icon circular button"><i class="github icon"></i></a>
                            <a href="#" class="ui wechat icon circular button"><i class="wechat icon"></i></a>
                            <a href="https://gitee.com/tqbx" target="_blank" class="ui icon circular button"><svg  width="1rem" height="1rem" xmlns="http://www.w3.org/2000/svg" name="zi_tmGitee" viewBox="0 0 2000 2000"><path d="M898 1992q183 0 344-69.5t283-191.5q122-122 191.5-283t69.5-344q0-183-69.5-344T1525 477q-122-122-283-191.5T898 216q-184 0-345 69.5T270 477Q148 599 78.5 760T9 1104q0 183 69.5 344T270 1731q122 122 283 191.5t345 69.5zm199-400H448q-17 0-30.5-14t-13.5-30V932q0-89 43.5-163.5T565 649q74-45 166-45h616q17 0 30.5 14t13.5 31v111q0 16-13.5 30t-30.5 14H731q-54 0-93.5 39.5T598 937v422q0 17 14 30.5t30 13.5h416q55 0 94.5-39.5t39.5-93.5v-22q0-17-14-30.5t-31-13.5H842q-17 0-30.5-14t-13.5-31v-111q0-16 13.5-30t30.5-14h505q17 0 30.5 14t13.5 30v250q0 121-86.5 207.5T1097 1592z"/></svg></a>
                            <a href="#" class="ui icon circular button qq" data-content="1332790762"><i class="qq icon"></i></a>
                        </div>
                        <!--二维码-->
                        <div class="ui bottom attached segment">
                            <div class="ui header center aligned m-text-spaced">扫码关注<i class="ui icon pointing down"></i></div>
                            <div class="ui centered card" style="width: 11em">
                                <img src="./static/images/contact/wechat.dib" alt="" class="ui rounded image" style="width: 210px;">
                            </div>
                        </div>

                    </div>
                    <!--微信二维码-->
                    <div class="center aligned wechat-qr ui flowing popup transition hidden">
                        <img src="./static/images/contact/wexin.jpg" alt="" class="ui rounded image">
                    </div>
                    <!--qq二维码-->
                    <div class="qq-qr ui flowing popup transition hidden">
                        <img src="./static/images/contact/qq.png" alt="" class="ui rounded image">
                    </div>

                </div>
            </div>
        </div>


        <!--底部-->
        <footer class="ui inverted segment vertical m-padded-tb-massive m-padded-bottom-small">
            <div class="ui center aligned container">
                <!--16-->
                <div class="ui inverted divided stackable grid">
                    <div class="three wide column">
                        <div class="ui inverted link list">
                            <div class="item">
                                <img src="./static/images/contact/wechat.dib" alt="" class="ui rounded image"
                                     style="width: 110px">
                            </div>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header m-opacity-mini">最新博客</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Leetcode 1 - 10</a>
                            <a href="#" class="item">Leetcode 1 - 10</a>
                            <a href="#" class="item">Leetcode 1 - 10</a>
                        </div>
                    </div>
                    <div class="three wide column">
                        <h4 class="ui inverted header m-opacity-mini">联系我</h4>
                        <div class="ui inverted link list">
                            <a href="#" class="item">Email: 1332790762@qq.com</a>
                            <a href="#" class="item">Phone: 123456789</a>
                        </div>
                    </div>
                    <div class="seven wide column">
                        <h4 class="ui inverted header m-opacity-mini">关于我</h4>
                        <p class="m-text-thin m-text-spaced m-opacity-mini">
                            Java小白，从零单排。文章如果有叙述不当的地方，还望评论区批评指正。当然，如果觉得文章对你有帮助，可以点个小小的推荐，或者关注我，一起交流，共同进步！</p>
                    </div>
                </div>
                <div class="ui inverted section divider"></div>
                <p class="m-text-thin m-text-spaced m-opacity-mini">Copyright ©2020 天乔巴夏 浙ICP备20020653号</p>
            </div>

        </footer>
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
        <script src="./static/js/jquery-3.5.1.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
        <script src="static/js/semantic.min.js"></script>

        <script>
			$('#side').click(function () {
				$('.m-item').toggleClass('m-mobile-hide');
			})

			// $('.qq').popup();
			$('.wechat').popup({
				popup: $('.wechat-qr'),
				// on: 'click',
				position: 'top center'
			})

			$('.qq').popup({
				popup: $('.qq-qr'),
				// on: 'click',
				position: 'top center'
			})
        </script>
    </body>
</html>